import './index.less'
import React, { Component } from 'react'
import { Layout, Icon } from 'antd'
import SiderMenu from './renderMenu'
import { connect } from 'dva'
import {router} from 'umi'
// import logoImg from '../../images/logo.png'

const { Sider } = Layout

@connect(s => ({
  ...s.routing,
  ...s.menuList
}))
class Comp extends Component {
  toggleCollapsed = () => {
    const {collapsed, firstHide} = this.props
    // console.log(firstHide)
    this.props.dispatch({
      type: 'menuList/save',
      payload: {
        collapsed: !collapsed,
        firstHide: !firstHide,
      },
    })
  }

  //渲染logo部分
  renderMenuHeader = () => {
    const { collapsed } = this.props
    return (
      <div>
        <div className="aside-btn" onClick={this.toggleCollapsed}>
          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'}/>
        </div>
        <div className={'logo'}>
          {/*<img src={logoImg} alt=""/>*/}
          {!collapsed&&<span>XX系统</span>}
        </div>
      </div>
    )
  }

  onOpenChange = (e) => {
    // const {firstHide} =this.props
    // console.log(this.props)
    this.props.dispatch({
      type: 'menuList/save',
      payload: {
        openKeys: e,
        firstHide: false,
      },
    })
  }
  onLink = ({path}) => {
    const {location} = this.props
    if (location.pathname===path){
      return
    }
    router.push(path)
  }

  render() {
    const { collapsed, openKeys, selectedKeys, firstHide, menuList } = this.props
    return (
      <Sider
        className={'aside-box'}
        collapsible
        trigger={null}
        width={220}
        collapsed={collapsed}
      >
        {this.renderMenuHeader()}
        <SiderMenu
          onOpenChange={this.onOpenChange}
          openKeys={firstHide ? null : openKeys}
          selectedKeys={selectedKeys}
          menus={menuList}
          inlineIndent={25}
          theme="dark"
          mode="inline"
          onLink={this.onLink}
        />
      </Sider>
    )
  }
}

export default Comp
